<template>
  <div class="order">
    <Header @func="showDelBtn"></Header>
    <!-- 购物车列表 -->
    <ul class="orderList">
      <li v-for="item in orderList" :key="item._id">
        <van-checkbox v-model="item.checked" />
        <div class="time">
          <p>{{ item.createdAt | filterTime }}</p>
          <p>{{ item.updatedAt | filterTime }}</p>
        </div>
        <p class="address">{{ item.address }}</p>
        <p class="price">￥{{ item.price }}</p>
      </li>
    </ul>
    <!-- 删除按钮栏 -->
    <van-submit-bar
      button-text="删除"
      @submit="delShop"
      v-if="showdel"
      button-color="orgin"
    >
      <van-checkbox v-model="checked" class="del-checkbox">全选</van-checkbox>
    </van-submit-bar>
    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="sumPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
      v-else
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { getOrderAPI, delOneOrderAPI, delOrdersAPI } from "../../api/order";
import Header from "../../components/Header.vue";
// import { Dialog } from "vant";
// import { Toast } from "vant";
export default {
  data() {
    return {
      orderList: [],
      showdel: false,
    };
  },
  filters: {
    filterTime: function (str) {
      let time = new Date(str);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      return `${y}-${m}-${d} ${h}:${mm}`;
    },
  },
  computed: {
    checked: {
      //set里发生改变，get里获取最新的值
      set(flag) {
        //$set 表示给vue对象动态添加属性checked
        // 此时 cartList里面已经存在了checked这个属性
        this.orderList.map((item) => this.$set(item, "checked", flag));
      },
      get() {
        // 判断选中的长度是不是等于carList长度
        // 如果相等，就全部被选中
        if (this.orderList.length == 0) {
          //购物车没有数据，全选就不选中
          return false;
        } else {
          return (
            this.orderList.length ==
            this.orderList.filter((item) => item.checked == true).length
          );
        }
      },
    },
    //计算总价
    sumPrice() {
      return this.orderList
        .filter((item) => {
          return item.checked; //筛选出选中的
        })
        .reduce(function (pre, cur) {
          //计算价格 pre初始值，cur当前项
          // pre 和cur都是筛选出来的cartList里面的item
          // cur.quantity 是当前购物车商品数量
          return (pre += cur.price);
        }, 0);
    },
    //计算属性，根据checked获取选中了哪几个商品
    checkedList() {
      let arr = []; //定义一个arr用来存储已选中的商品
      this.orderList.forEach((item) => {
        //如果选中了，就把信息存入arr数组里
        if (item.checked) {
          arr.push(item._id);
        }
      });
      return arr;
    },
  },
  watch: {},

  methods: {
    //init 获取订单列表
    async init() {
      const result = await getOrderAPI();
      console.log(result.orders);
      this.orderList = result.orders;
    },

    //接收Header组件传来的showdel值，从而达到，点击头部，可以操纵页面的效果
    showDelBtn(data) {
      this.showdel = data;
    },
    // 删除操作
    delShop() {
      console.log(this.checkedList);
      if (this.checkedList.length == 1) {
        delOneOrderAPI(this.checkedList[0]);
      } else if (this.checkedList.length > 1) {
        delOrdersAPI({
          ids: this.checkedList,
        });
      }
    },
    onSubmit() {
      console.log(this.checkedList);
    },
  },
  created() {
    this.init();
    this.showDelBtn();
  },
  mounted() {},
  components: {
    Header,
  },
};
</script>
<style scoped>
.orderList {
  padding-bottom: 50px;
}
.orderList li {
  height: 110px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 12px;
  color: #323233;
  font-size: 12px;
  background-color: #fafafa;
  margin-top: 8px;
}
.time {
  width: 110px;
  margin-left: 10px;
}
.address {
  width: 160px;
  margin: 0 10px;
}
.price {
  width: 50px;
  color: red;
}
.del-checkbox {
  position: absolute;
  left: 16px;
  top: 15px;
}
</style>
